<template>
	<view>
		<view class='sign'>
      <!-- 基本信息 -->
      <view class='header bg-color'>
				<view class='headerCon acea-row row-between-wrapper'>
					<view class='left acea-row row-between-wrapper'>
						<view class='pictrue'>
							<image :src='userInfo.avatar'></image>
						</view>
						<view class='text'>
							<view class='line1'>{{ userInfo.nickname }}</view>
							<view class='integral acea-row'>
                <text>积分: {{ userInfo.point }}</text>
              </view>
						</view>
					</view>
					<navigator class='right acea-row row-middle' hover-class='none'
                     url='/pages/users/user_sgin_list/index'>
						<view class='iconfont icon-caidan'></view>
						<view>明细</view>
					</navigator>
				</view>
			</view>

			<view class='wrapper'>
				<!-- 签到规则 -->
        <view class='list acea-row row-between-wrapper'>
					<view class='item' v-for="(item,index) in signConfigList" :key="index">
						<view :class="(index + 1 === signConfigList.length ? 'reward' : '') + ' ' +( signInfo.continuousDay >= item.day ? 'rewardTxt' : '')">
							第{{item.day}}天
						</view>
						<view class='venus'
                  :class="(index + 1 === signConfigList.length ? 'reward' : '') + ' ' +( signInfo.continuousDay >= item.day ? 'venusSelect' : '')">
						</view>
						<view class='num' :class='signInfo.continuousDay >= item.day ? "on" : ""'>+{{ item.point }}</view>
					</view>
				</view>
        <!-- 签到按钮 -->
				<button class='but bg-color on' v-if="signInfo.todaySignIn">已签到</button>
				<form @submit="goSign" report-submit='true' v-else>
					<button class='but bg-color' formType="submit">立即签到</button>
				</form>
				<view class='lock'></view>
			</view>
			<view class='wrapper wrapper2'>
				<view class='tip'>已累计签到</view>
				<view class='list2 acea-row row-center row-bottom'>
					<view class='item'>{{signCount[0] || 0}}</view>
					<view class='item'>{{signCount[1] || 0}}</view>
					<view class='item'>{{signCount[2] || 0}}</view>
					<view class='item'>{{signCount[3] || 0}}</view>
					<view class='data'>天</view>
				</view>
				<view class='tip2'>据说连续签到第 {{ maxDay }} 天可获得超额积分，一定要坚持签到哦~~~</view>
				<!-- 签到记录 -->
        <view class='list3'>
					<view class='item acea-row' v-for="(item,index) in signRecordList" :key="index">
						<view>
							<view class='name line1'>第 {{item.day}} 天签到积分奖励</view>
							<view class='data'>{{ formatDate(item.createTime) }}</view>
						</view>
						<view class='num font-color'>+{{ item.point }}</view>
					</view>
					<view class='loading' @click='goSignList' v-if="signRecordList.length >= 3">
            点击加载更多 <text class='iconfont icon-xiangyou' />
          </view>
				</view>
			</view>

      <!-- 签到提示 -->
			<view class='signTip acea-row row-center-wrapper' :class='active ?"on":""'>
				<view class='signTipLight loadingpic'></view>
				<view class='signTipCon'>
					<view class='state'>签到成功</view>
					<view class='integral'>获得{{ point }}积分</view>
					<view class='signTipBnt' @click='close'>好的</view>
				</view>
			</view>
			<view class='mask' @touchmove.stop.prevent="false" :hidden='!active'></view>
		</view>
	</view>
</template>
<script>
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from "vuex";
  import * as SignInApi from '@/api/member/signin';
  import dayjs from "@/plugin/dayjs/dayjs.min.js";
  export default {
		data() {
			return {
        signConfigList: [], // 签到配置列表
        maxDay: 0, // 最大的签到天数

        signInfo: {}, // 签到信息
        signCount: [], // 签到信息

        signRecordList: [], // 签到记录

        active: false, // 签到提示
				point: 0, // 刚签到获得的奖励
			};
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getSignInfo();
						this.getSignConfigList();
						this.getSignList();
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (!this.isLogin) {
        toLogin();
        return
			}
      this.getSignInfo();
      this.getSignConfigList();
      this.getSignList();
		},
		methods: {
			/**
			 * 获取签到配置
			 */
			getSignConfigList: function() {
        SignInApi.getSignInConfigList().then(res => {
					this.$set(this, 'signConfigList', res.data);
          if (res.data.length > 0) {
            this.maxDay = res.data[res.data.length - 1].day;
          }
				})
			},

			/**
			 * 去签到记录页面
			 */
			goSignList: function() {
				return this.$util.Tips('/pages/users/user_sgin_list/index');
			},

			/**
			 * 获取用户信息
			 */
			getSignInfo: function() {
        SignInApi.getSignInRecordSummary().then(res => {
          this.$set(this, 'signInfo', res.data);
          this.signCount = this.PrefixInteger(res.data.totalDay, 4);
        });
			},

			/**
			 * 获取签到列表
			 */
			getSignList: function() {
        SignInApi.getSignRecordPage({
          pageNo: 1,
          pageSize: 10
        }).then(res => {
          this.$set(this, 'signRecordList', res.data.list);
        })
			},

			/**
			 * 用户签到
			 */
			goSign: function(e) {
				if (this.signInfo.todaySignIn) {
          return this.$util.Tips({
            title: '您今日已签到!'
          });
        }
        SignInApi.createSignInRecord().then(res => {
					this.active = true;
					this.point = res.data.point;
          // 重新获得签到信息
          this.getSignInfo();
          this.getSignList();
          // 刷新个人信息
          this.$store.dispatch('USERINFO');
				}).catch(err => {
					return this.$util.Tips({
						title: err
					})
				});
			},
			/**
			 * 关闭签到提示
			 */
			close: function() {
				this.active = false;
			},

      /**
       * 数字分割为数组
       *
       * @param num 需要分割的数字
       * @param length 需要分割为n位数组
       */
      PrefixInteger: function(num, length) {
        return (Array(length).join('0') + num).slice(-length).split('');
      },
      formatDate: function(date) {
        return dayjs(date).format("YYYY-MM-DD");
      }
		}
	}
</script>
<style scoped lang="scss">
	.sign .header {
		width: 100%;
		height: 310rpx;
	}

	.sign .header .headerCon {
		padding: 0 0 0 30rpx;
		height: 234rpx;
	}

	.sign .header .headerCon .left {
		width: 530rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.sign .header .headerCon .left .integral text {
		font-size: 24rpx;
		margin-top: 19rpx;
		background-color: #ff9000;
		text-align: center;
		border-radius: 6rpx;
		font-weight: normal;
		padding: 4rpx 15rpx;
	}

	.sign .header .headerCon .text {
		width: 410rpx;
	}

	.sign .header .headerCon .left .pictrue {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 4rpx solid #ecddbc;
	}

	.sign .header .headerCon .left .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.sign .header .headerCon .right {
		width: 142rpx;
		height: 66rpx;
		background-color: #fff;
		border-radius: 50rpx 0 0 50rpx;
		font-size: 24rpx;
		color: #ff9000;
	}

	.sign .header .headerCon .right .iconfont {
		font-size: 33rpx;
		padding: 0 10rpx 0 30rpx;
		margin-top: 5rpx;
	}

	.sign .wrapper {
		background-color: #fff;
		margin: -80rpx 20rpx 0 20rpx;
		border-radius: 15rpx;
		padding-bottom: 80rpx;
		position: relative;
	}

	.sign .wrapper .list {
		padding: 0 30rpx;
		height: 240rpx;
	}

	.sign .wrapper .list .item {
		font-size: 22rpx;
		color: #8a8886;
		text-align: center;
	}

	.sign .wrapper .list .item .rewardTxt {
		width: 74rpx;
		height: 32rpx;
		background-color: #f4b409;
		border-radius: 16rpx;
		font-size: 20rpx;
		color: #a57d3f;
		line-height: 32rpx;
	}

	.sign .wrapper .list .item .num {
		font-size: 30rpx;
		color: #999;
	}

	.sign .wrapper .list .item .num.on {
		color: #ff9000;
	}

	.sign .wrapper .list .item .venus {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 56rpx;
		height: 56rpx;
		margin: 10rpx 0;
	}

	.sign .wrapper .list .item .venus.venusSelect {
		background-image: url('');
	}

	.sign .wrapper .list .item .venus.reward {
		background-image: url('');
		width: 75rpx;
		height: 56rpx;
	}

	.sign .wrapper .but {
		width: 400rpx;
		height: 76rpx;
		font-size: 30rpx;
		line-height: 76rpx;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		margin: 0 auto;
	}

	.sign .wrapper .but.on {
		background-color: #999 !important;
	}

	.sign .wrapper .lock {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 558rpx;
		height: 68rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -42rpx;
		z-index: 9;
	}

	.sign .wrapper2 {
		margin-top: 15rpx;
		padding: 73rpx 0 0 0;
	}

	.sign .wrapper2 .tip {
		font-size: 30rpx;
		color: #666;
		text-align: center;
	}

	.sign .wrapper2 .list2 {
		margin: 45rpx 0 49rpx 0;
	}

	.sign .wrapper2 .list2 .item {
		width: 80rpx;
		height: 116rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: 72rpx;
		text-align: center;
		line-height: 116rpx;
		margin-right: 19rpx;
		background-image: url('');
	}

	.sign .wrapper2 .list2 .data {
		font-size: 30rpx;
		color: #232323;
	}

	.sign .wrapper2 .tip2 {
		font-size: 30rpx;
		color: #999999;
		padding: 0 55rpx;
		text-align: center;
		line-height: 1.5;
	}

	.sign .list3 {
		margin: 45rpx 37rpx 0 37rpx;
		border-top: 1px dashed #eee;
	}

	.sign .list3 .item {
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		height: 130rpx;
	}

	.sign .list3 .item .name {
		color: #232323;
		font-size: 30rpx;
		width: 400rpx;
	}

	.sign .list3 .item .data {
		font-size: 24rpx;
		color: #bbbbbb;
		margin-top: 9rpx;
	}

	.sign .list3 .item .num {
		font-size: 36rpx;
		font-family: 'Guildford Pro';
	}

	.sign .list3 .loading {
		font-size: 26rpx;
		color: #282828;
		height: 97rpx;
		line-height: 97rpx;
		text-align: center;
	}

	.sign .list3 .loading .iconfont {
		font-size: 25rpx;
		color: #212121;
		vertical-align: 2rpx;
		margin-left: 10rpx;
	}

	.sign .signTip {
		width: 644rpx;
		height: 645rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -322rpx;
		margin-top: -322.5rpx;
		z-index: 99;
		text-align: center;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
	}

	.sign .signTip .signTipLight {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.sign .signTip.on {
		opacity: 1;
		transform: scale(1);
	}

	.sign .signTip .signTipCon {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 420rpx;
		height: 420rpx;
		margin-top: -700rpx;
		position: relative;
	}

	.sign .signTip .signTipCon .state {
		font-size: 34rpx;
		color: #fff;
		margin-top: 150rpx;
	}

	.sign .signTip .signTipCon .integral {
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-top: 9rpx;
	}

	.sign .signTip .signTipCon .signTipBnt {
		font-size: 30rpx;
		color: #eb4331;
		width: 260rpx;
		height: 76rpx;
		background: linear-gradient(90deg, #FFCA52 0%, #FE960F 100%);
		border-radius: 38rpx;
		line-height: 76rpx;
		margin: 48rpx auto 0 auto;
	}
</style>
